<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成都餐饮美食统计</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/fullPage.js/3.0.9/fullpage.css">
    <link rel="stylesheet" href="css/index.css">
    <style type="text/css">
        .b {
            border: 1px red solid;
        }

        .some-font {
            position: absolute;
            color: white;
            z-index: 10;
            text-align: center;
            top: 299px;
            left: 655px;
        }

        .font1 {
            font-size: 88px;
            font-family: 方正准圆, serif;
        }

        .font2 {
            text-align: right;
        }

        .row-title {
            font-size: 33px;
            color: #00428f;
            line-height: 77px;
        }
    </style>
</head>
<body>
<div class="fullPage" id="fullPage">
    <div class="section">
        <div class="some-font">
            <p class="font1">成都餐饮统计分析</p>
            <p class="font2">基于java大数据</p>
        </div>
        <div class="layui-carousel" id="carousel">
            <div carousel-item="">
                <div><img alt="" src="image/c1.jpg" class="c-img"></div>
                <div><img alt="" src="image/c2.jpg" class="c-img"></div>
                <div><img alt="" src="image/c5.jpg" class="c-img"></div>
                <div><img alt="" src="image/c10.jpg" class="c-img"></div>
                <div><img alt="" src="image/c14.jpg" class="c-img"></div>
            </div>
        </div>
    </div>
    <div class="section" style="background-color: #ffffff;">
        <div class="container" style="margin-top: 20px">
            <div class="layui-row">
                <p class="row-title" style="background-color: white">
                    echarts饼图统计
                </p>
            </div>
            <div class="layui-row">
                <div id="e1" class="layui-col-md6" style="height: 444px;"></div>
                <div id="e2" class="layui-col-md6" style="height: 444px;"></div>
            </div>
            <div class="layui-row" style="display: none;">
                <div class="" style="background-color: white;font-size: 20px;font-family: 幼圆;margin:50px 166px;">
                    <p style="">&nbsp;&nbsp;&nbsp;&nbsp;20多年前，老谭对未婚妻许诺，要带他从事一项甜蜜的事业。</p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;交通不便的年代，人们远行时，会携带能长期保存的食物，他们被统称为路菜，路菜不只用来果腹，更是主人习惯的家乡味道。看似寂寞的路途，因为四川女人的存在，而变得生趣盎然。妻子甚至会用简单的工作，制作出豆花，这是川渝一带最简单最开胃的美食。</p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;通过加热，卤水使蛋白质分子连接成网状结构，豆花实际上就是大豆蛋白质重新组合的凝胶，挤出水分，力度的变化决定豆花的口感，简陋的帐篷里，一幕奇观开始呈现。现在是佐料时间，提神的香菜，清凉的薄荷，酥脆的油炸花生，还有酸辣清冽的泡菜，所有的一切，足以令人忘记远行的疲惫。</p>
                </div>
            </div>
            <div class="layui-row">
                <div id="e5" class="layui-col-md6" style="height: 444px;"></div>
                <div id="e6" class="layui-col-md6" style="height: 444px;"></div>
            </div>
        </div>
    </div>
    <div class="section" style="background-color: #ffffff">
        <div class="container">
            <div class="layui-row">
                <p class="row-title">
                    echarts动态柱状图
                </p>
            </div>
            <div class="layui-row">
                <div class="" id="e3" style="width: 100%;height: 400px;"></div>
            </div>
            <div class="layui-row">
                <div class="" id="e4" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="section" style="background-color: #1A232C">
        <div class="container">
            <div class="layui-row">
                <p class="row-title" style="color: white;font-weight: bold;">
                    成都饮食消费热力图
                </p>
            </div>
            <div class="layui-row">
                <iframe src="./gaode/heatMap.html" width="100%" frameborder="0" height="999px"></iframe>
            </div>
        </div>
    </div>
    <div class="section" style="background-color: #f6f6f6;">
        <div class="container" style="background-color: white;">
            <div class="layui-row">
                <p class="row-title">
                    大数据分析统计
                </p>
            </div>
            <div class="layui-row">
                <hr>
            </div>
            <div class="layui-row" style="padding-top: 10px;">
                <form class="layui-form layui-inline">
                    <div class="layui-form-item" style="margin-left: 10px;">
                        <input type="text" placeholder="餐饮店名" class="layui-input-inline layui-input" name="name">
                        <input type="text" placeholder="地址" class="layui-input-inline layui-input" name="address">
                        <input type="text" placeholder="餐饮店类型" class="layui-input-inline layui-input" name="type">
                    </div>
                </form>
                <div class="layui-inline" style="float: right;margin-right: 10px;">
                    <button class="layui-btn" onclick="search()">查询</button>
                    <button class="layui-btn" onclick="gis()">定位</button>
                </div>
            </div>
            <div class="layui-row" id="row-table">
                <table id="dataDetail" class="layui-table"></table>
            </div>
            <div class="layui-row" style="text-align: center">
                <p>&copy;2020/1/7&nbsp;</p>
            </div>
        </div>

    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.4.1/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/layui/layui.all.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/fullPage.js/3.0.9/fullpage.js"></script>
<script type="text/javascript" src="js/echarts/echarts.js"></script>
<script type="text/javascript">
    //echarts
    const myChart1 = echarts.init($("#e1")[0]);
    const myChart2 = echarts.init($("#e2")[0]);

    const myChart3 = echarts.init($("#e3")[0]);
    const myChart4 = echarts.init($("#e4")[0]);

    const myChart5 = echarts.init($("#e5")[0]);
    const myChart6 = echarts.init($("#e6")[0]);

    const option1 = {
        title: {
            text: "地区美食数量分布统计",
            left: "40"
        },
        tooltip: {},
        legend: {
            orient: "vertical",
            right: 10
        },
        series: [{
            type: 'pie',
            data: []
        }]
    };

    const option2 = {
        title: {
            text: "美食类型统计分析",
            left: "40"
        },
        tooltip: {},
        legend: {
            orient: "vertical",
            right: 10
        },
        series: [{
            type: 'pie',
            data: []
        }]
    };

    const option3 = {
        title: {
            text: "美食信息录入时间统计"
        },
        tooltip: {},
        xAxis: {
            type: "time"
        },
        yAxis: {},
        dataset: {
            dimensions: ['name', 'value'],
            source: []
        },
        dataZoom: [{
            type: 'inside'
        }],
        series: [{
            type: 'bar'
        }]
    };

    const option4 = {
        title: {
            text: "地区美食类型统计"
        },
        tooltip: {},
        xAxis: {
            type: "category"
        },
        yAxis: {},
        dataset: {
            dimensions: ['name', '中餐厅', '休闲餐饮场所', '其他', '冷饮店', '咖啡厅',
                '外国餐厅', '快餐厅', '甜品店', '糕饼店', '茶艺馆', '餐饮相关场所'],
            source: []
        },
        dataZoom: [{
            type: 'inside'
        }],
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}

        ]
    };

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodPie1",
        success: function (res) {
            console.log(res);
            option1.series[0].data = res;
        }
    });

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodPie2",
        success: function (res) {
            console.log(res);
            option2.series[0].data = res;
        }
    });

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodBar1",
        success: function (res) {
            console.log(res);
            option3.dataset.source = res;
        }
    });

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodBar2",
        success: function (res) {
            console.log(res);
            const arr = [];
            let obj = {
                name: "",
                中餐厅: 0,
                休闲餐饮场所: 0,
                冷饮店: 0,
                咖啡厅: 0,
                外国餐厅: 0,
                快餐厅: 0,
                甜品店: 0,
                糕饼店: 0,
                茶艺馆: 0,
                餐饮相关场所: 0,
                其他: 0,
            };
            //转换参数
            let oldName = "";
            for (let i = 0; i < res.length; i++) {
                const tmp = res[i];
                if (tmp.name === oldName) {
                    obj[tmp.type] = tmp.value;
                } else {
                    if (oldName !== "") {
                        arr.push(obj);
                    }
                    oldName = tmp.name;
                    obj = {
                        name: oldName,
                        中餐厅: 0,
                        休闲餐饮场所: 0,
                        冷饮店: 0,
                        咖啡厅: 0,
                        外国餐厅: 0,
                        快餐厅: 0,
                        甜品店: 0,
                        糕饼店: 0,
                        茶艺馆: 0,
                        餐饮相关场所: 0,
                        其他: 0,
                    };
                }
            }
            console.log(arr);
            option4.dataset.source = arr;
        }
    });

    const option5 = {
        title: {
            text: "地区饮品数量排行统计"
        },
        tooltip: {},
        xAxis: {
            type: "category"
        },
        yAxis: {},
        dataset: {
            dimensions: ['name', 'value'],
            source: []
        },
        dataZoom: [{
            type: 'inside'
        }],
        series: [{
            type: 'bar'
        }]
    };

    const option6 = {
        title: {
            text: "地区饮品店评分排行统计"
        },
        tooltip: {},
        xAxis: {
            type: "category"
        },
        yAxis: {},
        dataset: {
            dimensions: ['name', 'value'],
            source: []
        },
        dataZoom: [{
            type: 'inside'
        }],
        series: [{
            type: 'bar'
        }]
    };

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodPie6",
        success: function (res) {
            console.log(res);
            option5.dataset.source = res;
        }
    });

    $.post({
        url: "http://127.0.0.1/foodShopSearch/queryFoodPie7",
        success: function (res) {
            console.log(res);
            option6.dataset.source = res;
        }
    });

    //单页
    new fullpage('#fullPage', {
        verticalCentered: false,
        normalScrollElements: '#row-table',
        afterLoad: function (arg1, arg2, arg3) {
            myChart1.clear();
            myChart2.clear();
            myChart3.clear();
            myChart4.clear();
            myChart5.clear();
            myChart6.clear();
            if (arg2.index === 1) {
                myChart1.setOption(option1);
                myChart2.setOption(option2);

                myChart5.setOption(option5);
                myChart6.setOption(option6);
            }
            if (arg2.index === 2) {
                myChart3.setOption(option3);
                myChart4.setOption(option4);
            }
        }
    });

    //图片轮播
    layui.carousel.render({
        elem: '#carousel',
        width: '100%',
        height: '999px',
        interval: 5000
    });

    //初始化热力图


    //初始化表格
    const table1 = layui.table.render({
        elem: '#dataDetail',
        url: "http://127.0.0.1/foodShopSearch/queryFoodShop",
        method: "post",
        page: true,
        even: true,
        height: "720",
        limit: 20,
        cols: [[
            {type: "checkbox", width: 50},
            {type: "numbers", title: "序号", width: 50},
            {field: "objId", title: "主键", hide: true},
            {
                field: "name", title: "美食店名", templet: function (res) {
                    return "<a href='javaScript:void(0);' onclick='showDetail(this)' id='" + res.id + "'>" + res.name + "</a>";
                }
            },
            {field: "tel", title: "电话"},
            {field: "address", title: "地址"},
            {field: "type", title: "类型"},
            {field: "tag", title: "菜单"},
            {field: "cost", title: "平均消费", width: 100},
            {field: "rating", title: "评分", width: 80},
            {field: "timestamp", title: "统计时间"},
            {field: "insertTime", title: "大数据计算时间"}
        ]]
    });

    function search() {
        const name = $("input[name='name']");
        const address = $("input[name='address']");
        const type = $("input[name='type']");
        table1.reload({
            where: {
                name: name.val(),
                address: address.val(),
                type: type.val()
            },
            page: {
                curr: 1
            }
        });
    }

    function dataDetail() {
        layui.layer.open({
            type: 2,
            title: "数据统计详情",
            area: ["80%", "800px"],
            content: "data/data.html"
        });
    }

    function showDetail(e) {
        const id = $(e).attr("id");
        console.log(id);
        layui.layer.open({
            type: 2,
            title: "详情",
            area: ["70%", "80%"],
            content: "./detail/detail.html?id=" + id
        });
    }

    function gis() {
        const data = layui.table.checkStatus('dataDetail').data;
        if (data.length === 1) {
            parent.layui.layer.open({
                type: 2,
                area: ["90%", "80%"],
                content: "./baidu/demo.html?location=" + data[0].location + "&abc=1"
            });
        } else {
            layui.layer.msg("请选择一条数据");
        }
    }


</script>
</html>